<template>
  <!-- 车辆总览 -->
  <div class="left-top-box">
    <group-card title="人员/车辆制证总览">
      <div style="position: relative">
        <div class="my-chart" ref="chartRef"></div>
        <div class="chart-img"></div>
      </div>
    </group-card>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  personTypeList: {
    type: Array,
    default: () => [],
  },
});

const colorMap = {
  后台证: "#578D31",
  工作人员证: "#833F0A",
  公安执勤证: "#C00000",
  特殊卡: "#FFC000",
  演职人员证: "#9550CB",
  外场证: "#000000",
  安保指挥证: "#EF949E",
  消防执勤证: "#4BAF57",
  嘉宾证: "#FEF2CA",
  医疗证: "#4471C4",
  公安指挥证: "#30C0B4",
  全通证: "#fff",
  赞助商证: "#7F7F7F",
  公安总指挥证: "#E54C5E",
  选手证: "#E23C5E",
  测试证: "#F21C5E",
  媒体证: "#E11C1E",
  经纪人证: "#E32B1E",
  公安副总指挥证: "#F12D1F",
  文化全通证: "#BB5B1E",
  消防指挥证: "#B65B1E",
};

const chartRef = ref(null);
let chart = null;

const initChart = () => {
  if (!chartRef.value) {
    console.error("Chart container is not mounted");
    return;
  }

  if (chart) {
    chart.dispose();
  }

  chart = echarts.init(chartRef.value);

  const filteredList = props.personTypeList.filter(
    (item) => item.name != null && item.name !== ""
  );

  if (filteredList.length === 0) {
    console.warn("No valid data for rendering the chart");
    return;
  }

  const legendData = filteredList.map((item) => ({
    name: item.name,
    icon: "circle",
    textStyle: {
      color: colorMap[item.name] || "rgba(200, 200, 200, 1)",
    },
  }));

  const seriesData = filteredList.map((item) => ({
    value: item.count || 0,
    name: item.name || "未命名",
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
          { offset: 0, color: colorMap[item.name] || "rgba(200, 200, 200, 1)" },
          { offset: 1, color: "transparent" },
        ]),
      },
    },
  }));

  const option = {
    legend: {
      orient: "horizontal",
      x: "5%",
      y: "1%",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 10,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
      },
      data: filteredList.map((item) => ({
        name: item.name,
        icon: "circle", // 图例的形状
        itemStyle: {
          color: colorMap[item.name] || "rgba(200, 200, 200, 1)", // 使用 colorMap 中的颜色
        },
      })),
    },
    series: [
      {
        name: "人员/车辆制证总览",
        type: "pie",
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(153, 153, 153, 0.6)",
          },
        },
        radius: ["45%", "64%"],
        center: ["50%", "66%"],
        hoverAnimation: false,
        label: { show: false },
        data: seriesData,
      },
    ],
  };

  chart.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", () => chart && chart.resize());
});

watch(
  () => props.personTypeList,
  (newPersonTypeList) => {
    if (newPersonTypeList.length > 0) {
      initChart();
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.left-top-box {
  height: 350px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;

  .my-chart {
    width: 100%;
    height: 300px;
  }

  .chart-img {
    width: 112px;
    height: 112px;
    position: absolute;
    bottom: 46px;
    left: 38.2%;
    z-index: -1;
    background: url("../../../../assets/images/bgc-personnel.png") no-repeat
      center/cover;
  }
}
</style>
